<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div2{
				width: 300px;
				height: 300px;
				background-color: black;
			}
			#div3{
				width: 300px;
				height: 300px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<label>第一题</label>
		<button type="button" id="btn" onclick="btnClick();">按钮</button>
		<br />
		<label>第二题</label>
		<div id="div2" onmouseenter="enterdiv();" onmouseleave="leavediv();" onmousemove="movediv();"></div><br />
		<label>第三题</label>
		<form action="#" method="post">
			<label>用户名:</label>
			<input type="text" name id="user" value onfocus="userselectInput();" onblur="userleaveInput();"/>
			<br />
			<label>密码:</label>
			<input type="password" name id="pwd" value onfocus="pwdselectInput();" onblur="pwdleaveInput();"/>
			<br />
			<button type="button"  onclick="btnjudge();">提交</button>
		</form>
		<label>第四题</label>
		<div id="div3" onmousemove="movediv2();"></div>
		<br />
		<button type="button" id="add" onclick="myaddlistener();">为div3添加监视器</button>
		<button type="button" id="remove" onclick="myremovelistener();">为div3移除监听器</button>
	</body>
	<script type="text/javascript">
		//第一题
		//1
		function btnClick(){
			console.log('点击按钮');
		}
		//2
		document.getElementById('btn').onclick = btnClick;
		//3
		document.getElementById('btn').onclick = function(){
			console.log('点击按钮2');
		}
		//第二题
		function enterdiv(){
			console.log('进入事件');
		}
		document.getElementById('div2').onmouseenter = enterdiv;
		document.getElementById('div2').onmouseenter = function(){
			console.log('进入事件');
		}
		function leavediv(){
			console.log('离开事件');
		}
		document.getElementById('div2').onmouseleave = enterdiv;
		document.getElementById('div2').onmouseleave = function(){
			console.log('离开事件');
		}
		function movediv(){
			console.log('移动事件');
		}
		document.getElementById('div2').onmousemove = enterdiv;
		document.getElementById('div2').onmousemove = function(){
			console.log('移动事件');
		}
		//第三题
		function userselectInput(){
			console.log('用户在输入名称');
		}
		function userleaveInput(){
			if(document.getElementById('user').value == ''){
				alert('没有输入用户名');
			}
		}
		function pwdselectInput(){
			console.log('用户在输入密码');
		}
		function pwdleaveInput(){
			if(document.getElementById('pwd').value == ''){
				alert('没有输入密码');
			}
		}
		function btnjudge(){
			if(document.getElementById('user').value == '' && document.getElementById('pwd').value == ''){
				alert('用户名和密码为空');
			}else if(document.getElementById('user').value == ''){
				alert('没有输入用户名');
			}else if(document.getElementById('pwd').value == ''){
				alert('没有输入密码');
			}
		}
		//第四题
		function movediv2(){
			console.log('移动事件');
		}
		function myaddlistener(){
			document.getElementById('div3').addEventListener('click',movediv2);
		}
		function myremovelistener(){
			document.getElementById('div3').removeEventListener('click',movediv2);
			console.log('div3监视器已被移除');
		}
	</script>
</html>
